<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { storageKey } from '../../common/constants'
	const { t, locale } = useI18n()
	const setLocale = ref(locale.value)
	const localeList = [{
		label: '简体中文',
		value: 'zh-Hans'
	}, {
		label: 'English',
		value: 'en'
	}]
	const changeLocale = (l : string) => {
		setLocale.value = l
	}
	const save = () => {
		locale.value = setLocale.value
		uni.setStorageSync(storageKey.locale, locale.value)
		uni.reLaunch({
			url: '/pages/main/main'
		})
	}
</script>
<template>
	<view class="language-setting">
		<com-nav-bar-title title="languageSetting.title" :enableRight="true">
			<template #right>
				<view class="save-btn" @click="save">
					{{t('languageSetting.save')}}
				</view>
			</template>
		</com-nav-bar-title>
		<com-i18n-view title="languageSetting.selectLanguage" class="title"></com-i18n-view>
		<view class="choices">
			<view v-for="item in localeList" class="choice" @click="changeLocale(item.value)">
				<text>{{item.label}}</text>
				<uni-icons type="checkmarkempty" v-if="setLocale === item.value"></uni-icons>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.language-setting {
		height: 100vh;
		width: 100%;
		background-color: $common-background-color;

		.save-btn {
			width: 40%;
			height: 48rpx;
			line-height: 45rpx;
			background-color: $primary-color;
			color: white;
			font-size: 22rpx;
			border-radius: 60rpx;
			text-align: center;
		}

		.choices {
			border-radius: 20rpx;
			background-color: white;
			margin: 20rpx;

			.choice {
				padding: 25rpx;
				border-top: 1rpx solid gainsboro;
				font-size: 25rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.choice:first-child {
				border-top: none;
			}
		}
	}
</style>